<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';

import OperateMethodCodeEditor from './components/OperateMethodCodeEditor.vue';

import {RepoProductEntity} from "@/api/device/product/types";
import {ElMessage} from "element-plus";
import {getOperateEntity, updateOperateEntity} from "@/api/repo/comp/local";

const operateMethodCodeEditorRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样

const dataState = reactive({
  // 版本ID
  versionId: '',
  // 操作名称
  operateId: 0,
  compId: 0,
  entity: {} as RepoProductEntity,
});


/**
 * 捕获来自对话框的更新操作
 * @taskParam value
 */
function handleUpdate(value: any) {
  let formData = value;

  // 指明：不修改extendParam
  formData.extendParam = undefined;

  formData.engineType = "JavaScript";
  formData.compId = dataState.compId;
  updateOperateEntity(formData).then(() => {
    ElMessage.success('更新成功');
  })
}

/**
 * 刷新页面信息
 */
function handleQuery() {
  getOperateEntity(dataState.operateId).then(({data}) => {
  //  operateMethodProfileRef.value.initData(data);
    operateMethodCodeEditorRef.value.initData(data);
  });
}

function getHrefParams() {
  let tag = "/repo-comp/local/jsp-decoder/version-info?";
  let start = location.href.indexOf(tag);
  if (start <= 0) {
    return;
  }

  let params = location.href.substring(start + tag.length);
  let param = params.split("&");
  let compId = (param.at(0) as string).split("=").at(1);
  let operateId = (param.at(1) as string).split("=").at(1);


  dataState.compId = Number.parseInt(compId as string);
  dataState.operateId = Number.parseInt(operateId as string);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  // 从地址栏获得操作方法的ID
  getHrefParams();

  // 向后台查询详细信息
  handleQuery();
});

</script>

<template>
  <div class="app-container">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>动态解码</el-breadcrumb-item>
        <el-breadcrumb-item>操作列表</el-breadcrumb-item>
        <el-breadcrumb-item>操作详情</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
    </div>

    <!-- 数据表单：创建/修改 -->
    <operate-method-code-editor ref="operateMethodCodeEditorRef"
                                @update="handleUpdate"
    />

  </div>
</template>
